<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		span {
			margin: 10px;
		}

		.Tabl {
			height: 30px;
			width: 88%;
			font-size: 14px;

			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			font-weight: bold;
			color: #B8B8B8;
			width: 110px;
			font-size: 13px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
			font-size: 13px;
			color: rgb(85, 85, 85);
		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #D8D8D8;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 33%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		.remark {
			font-size: 26px;
			color: red;
			font-weight: bold;
			display: none;
		}

		#imgBox img {
			display: block;
			width: 80%;
			margin: 30px auto;
		}

		#fullPage {
			display: none;
			background: black;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 19930428;
		}

		#fullPage img {
			display: block;
			width: 100%;
		}

		#canvas {
			width: 100%;
			height: 100%;
			background: none;
			display: block;
		}

		.aa {
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab" checked>
			<label for="tab1">植物信息</label>
			<div class="content">
				<table class="Tabl">
					<tr>
						<td class="Td1">名称</td>
						<td class="Td2" id="name"><span style="color:#FF8C00"></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">类型</td>
						<td class="Td2" id="type"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">别称</td>
						<td class="Td2" id="alias"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">科属</td>
						<td class="Td2" id="genus"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">地区</td>
						<td class="Td2" id="family"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">习性</td>
						<td class="Td2" id="division"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<table class="Tabl">
					<tr>
						<td class="Td1">用途</td>
						<td class="Td2" id="kingdom"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">病虫害</td>
						<td class="Td2" id="species"><span style="color:#FF8C00">
								<!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<!-- <table class="Tabl">
					<tr>
						<td class="Td1">名称</td>
						<td class="Td2" id="name"></td>
						<td class="Td1">类型</td>
						<td class="Td2" id="type"></td>
					</tr>
				</table>

				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">别称</td>
						<td class="Td2" id="alias"></td>
						<td class="Td1">科属</td>
						<td class="Td2" id="genus"></td>
					</tr>
				</table> -->

				<!-- 	<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">地区</td>
						<td class="Td2" id="family">

						</td>
						<td class="Td1">习性</td>
						<td class="Td2" id="division">

						</td>
					</tr>
				</table>

				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">用途</td>
						<td class="Td2" id="kingdom">

						</td>
						<td class="Td1">病虫害</td>
						<td class="Td2" id="species">

						</td>
					</tr>
				</table> -->

				<hr class="Hr" />
				<div style="padding: 10px;">
					<!-- <ul class="upload-ul clearfix">
				<li class="upload-pick">
					<div class="webuploader-container clearfix" id="goodsUpload"></div>
				</li>
			</ul> -->
					<img src="" id="image" width=335;height=350; />
				</div>
			</div>
		</li>
		<li>
			<input id="tab3" type="radio" name="tab">

			<label for="tab3">统计分析</label>
			<div class="content">
				<table class="Tabl" id="qqq111">
					<thead>
						<tr>
							<td>
								类别
							</td>
							<td>
								数量(株)
							</td>
							<td>
								面积(㎡)
							</td>
						</tr>
					</thead>
					<tbody id="tj">

					</tbody>
					<tfoot>
						<tr>
							<td>总计</td>
							<td id="zj"></td>
							<td id="mj"></td>
						</tr>
					</tfoot>
				</table>
				<table>
					<tr>
						<td style="width: 100%">
							<div style="background-color: #fff;">
								<span>
									<img src="../../image/slnum.png" style="width: 30px;height: 30px;">
									<span style="font-size: 13px;color: #c4c4c4;">植物数量占比</span>
								</span>
								<div id="container" style="height: 200px"></div>
								<!-- <div id="containerPie" style="height: 200px; width: 100%;margin-top: 10px;"></div> -->
							</div>

						</td>
					</tr>
					<tr>
						<td style="width: 100%">
							<div style="background-color: #fff;">
								<span>
									<img src="../../image/mj.png" style="width: 30px;height: 30px;">
									<span style="font-size: 13px;color: #c4c4c4;">植物面积占比</span>
								</span>
								<div id="container1" style="height: 200px"></div>
								<!-- <div id="containerPie" style="height: 200px; width: 100%;margin-top: 10px;"></div> -->
							</div>

						</td>
					</tr>
				</table>
			</div>
		</li>
	</ul>
</body>
<script src="../../script/webuploader.min.js"></script>
<script src="../../script/diyUpload.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
	apiready = function () {
		var id = api.pageParam.id;
		//片区id
		var areaid = $api.getStorage('selectpor').id
		//项目id
		var proid = $api.getStorage('userSession').data.proId;
		//企业id
		var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
		$.ajax({
			url: BaseServiceUrl + "mobile/plant/typetree.json",
			type: "POST",
			data: {
				areaid: areaid,
				proid: proid,
				enterpriseid: enterpriseid
			},
			dataType: "json",
			success: function (ret) {
				var data = ret.data;
				var h = "";
				var zj = 0; //数量
				var mj = 0; //面积
				var area;
				var servicedata = []; //数量echartdata
				var mservicedata = []; //面积echartdata
				for (var i = 0; i < data.length; i++) {
					if (data[i].area != null) {
						area = data[i].area
					} else {
						area = 0.0
					}
					h += "<tr><td>" + data[i].name + "</td><td>" + data[i].state + "</td><td>" + area + "</td></tr>";
					$("#tj").html(h);
					zj += data[i].state;
					mj += data[i].area;
					//数量
					var obj = {};
					obj.value = data[i].state;
					obj.name = data[i].name;
					servicedata[i] = obj;
					//面积
					var mobj = {};
					mobj.value = data[i].area;
					mobj.name = data[i].name;
					mservicedata[i] = mobj;
				}
				//总计赋值
				$("#zj").text(zj);
				$("#mj").text(mj);

				//数量图
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					title: {
						//	text: '植物数量占比',
						//	subtext: '植物类型',
						left: 'center'
					},
					grid: {
					
						y: 0
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					series: [{
						name: '植物数量',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: servicedata,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}

				//面积图
				var dom1 = document.getElementById("container1");
				var myChart1 = echarts.init(dom1);
				var app = {};
				option = null;
				option = {
					title: {
						//	text: '植物面积占比',
						//	subtext: '植物类型',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					series: [{
						name: '植物面积',
						type: 'pie',
						radius: '55%',
						center: ['50%', '60%'],
						data: mservicedata,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				if (option && typeof option === "object") {
					myChart1.setOption(option, true);
				}

			},
			error: function (jqXHR, textStatus, errorThrown) {}
		});


		//植物详情信息
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/plant/details.json",
			data: {
				id: id
			},
			dataType: "json", //返回数据形式为json
			success: function (result) {
				$("#name").html(result.data.name);
				$("#type").html(result.data.plantType.name);
				$("#alias").html(result.data.alias);
				$("#genus").html(result.data.genus);
				$("#family").html(result.data.family);
				$("#division").html(result.data.division);
				$("#kingdom").html(result.data.kingdom);
				$("#species").html(result.data.species);
				$("#image").attr("src", result.data.image);
			}
		});



		//统计分析列表
		var app1 = new Vue({
			el: '#qqq111',
			data: {
				todos: [

				]
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/appcodegreenland/tongji.json",
					data: {
						id: id
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {

						for (var i = 0; i < result.datas.length; i++) {
							//alert(JSON.stringify(result));
							//var url="http://192.168.43.43:8090/kaizouba/"+result.data[i].picture;
							//alert(url)
							app1.todos.push(result.datas[i])
						}


					}
				});
			}
		})


	};

	function lvdizhiwu(id) {
		api.openWin({
			name: 'xxxxx',
			url: 'lvdizhiwu_window.html',
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});

	}

	//选择正常或者异常
	flag = "btn1";

	function btn1() {
		document.getElementById("btn2").style.color = "#FFFFFF";
		document.getElementById("btn1").style.color = "#FFFFFF";
	}

	function btn2() {
		document.getElementById("btn1").style.color = "#FFFFFF";
		document.getElementById("btn2").style.color = "#FFFFFF";
	}

	function btn(num) {
		if (num == 1) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn1").style.backgroundColor = "#FF8C00";
			flag = "btn1";
		}
		if (num == 2) {
			document.getElementById(flag).style.color = "#FFFFFF";
			document.getElementById(flag).style.backgroundColor = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn2").style.backgroundColor = "#FF8C00";
			flag = "btn2";
		}
	}
</script>



</html>